﻿@{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>练习</title>
    <script src="~/BootstrapSouce(bootstrap)/js/jquery.js"></script>
    <script src="~/BootstrapSouce(bootstrap)/js/bootstrap.js"></script>
    <link href="~/BootstrapSouce(bootstrap)/css/bootstrap.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-1.10.2.js"></script>
    <link href="~/Layui/layui-v2.2.3/layui/css/layui.css" rel="stylesheet" media="all" />
    <script src="~/Layui/layui-v2.2.3/layui/layui.js"></script>
    @*<script src="~/Layui/layui-v2.2.3/layui/layui.all.js"></script>*@
</head>
<body>

    <div class="layui-tab-item">
        <div id="pageDemo"></div>
    </div>
    <div class="demoTable">
        <nav>
            <ul class="nav nav-tabs" style="margin-left:220px">
                <li><i class="layui-icon">&#xe627;</i><a>全选</a></li>
                <li><i class="layui-icon">&#x1002;</i><a>刷新</a></li>
                <li><a href="#" data-toggle="modal" data-target="#MyCustomerAdd">新建合同/订单</a></li>
                <li><i class="layui-icon">&#x1002;</i><a>编辑</a></li>
                <li><i class="layui-icon">&#x1002;</i><a>删除</a></li>
                <li><i class="layui-icon">&#x1002;</i><a>导入EXCEL</a></li>
                <li><i class="layui-icon">&#x1002;</i><a>导出本页</a></li>
                <li><i class="layui-icon">&#x1002;</i><a>导出全部</a></li>
            </ul>
        </nav>
        @*<div style="width:100%;height:50px;margin:0 auto">
            <div class="layui-btn-group" style="float:left;padding-top:20px;">
                <button class="layui-btn layui-btn-primary" onclick="xuan(this)"><i class="layui-icon">&#xe627;</i>全选</button>
                <button class="layui-btn layui-btn-primary" onclick="Refresh()"><i class="layui-icon">&#x1002;</i>刷新</button>
                <a href="#Add" data-toggle="modal">
                    <button class="layui-btn layui-btn-primary"><i class="layui-icon">&#xe608;</i>新建合同/订单</button>
                </a>
                <a href="#Add" data-toggle="modal">
                    <button class="layui-btn layui-btn-primary"><i class="layui-icon">&#xe642;</i>编辑</button>
                </a>
                <button class="layui-btn layui-btn-primary" onclick="BatchDel()"> <i class="layui-icon">&#xe640;</i>删除</button>
                <button class="layui-btn layui-btn-primary"><i class="layui-icon">&#xe67c;</i>导入EXCEL</button>
                <button class="layui-btn layui-btn-primary"><i class="layui-icon">&#xe609;</i>导出本页</button>
                <button class="layui-btn layui-btn-primary"><i class="layui-icon">&#xe62d;</i>导出全部</button>

            </div>
            <div class="demoTable" style="float:right;padding-right:20px;margin-top:20px;">
                <div class="layui-inline">
                    <input class="layui-input" name="id" id="demoReload" autocomplete="off">
                </div>
                <button class="layui-btn"><i class="layui-icon">&#xe615;</i></button>
                <button class="layui-btn"><i class="layui-icon">&#xe614;</i></button>
            </div>*@
        </div>
    </div>
    <!--添加模态-->
    <div class="modal fade" id="MyCustomerAdd">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <a class="close" data-dismiss="modal">×</a>
                    <h4>新建客户</h4>
                </div>
                <div class="modal-body">
                    @using (Ajax.BeginForm("CustomerAdd", "MyCustomer", new AjaxOptions()
                    {
                        HttpMethod = "POST",
                        OnSuccess = "AddSuccess",
                        OnFailure = "AddFailure"
                    }))
                    {
                        <table class="table table-bordered table-striped">
                            <tr>
                                <td>角色名称</td>
                                <td><input id="Text1" type="text" name="RoleName" /></td>
                            </tr>
                            <tr>
                                <td>英文名称</td>
                                <td><input id="Text1" type="text" name="RoleEnglishName" /></td>
                            </tr>
                            <tr>
                                <td>所属公司</td>
                                <td><input id="Text1" type="text" name="RolePlace" /></td>
                            </tr>
                            <tr>
                                <td>管辖范围</td>
                                <td><input id="Text1" type="text" name="RoleRange" /></td>
                            </tr>
                            <tr>
                                <td colspan="2">
                                    <div class="modal-footer">
                                        <a href="#" data-dismiss="modal" class="btn btn-default">取消</a>
                                        <input id="Submit1" type="submit" value="确认添加" class="btn  btn-primary" />
                                    </div>
                                </td>
                            </tr>
                        </table>
                    }
                </div>
            </div>
        </div>
    </div>
   <table class="layui-hide" style="margin:0 auto;width:1000px" id="MyCustomerInfoShow" lay-filter="demo"></table>
    <script type="text/html" id="OperationBar">
        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
    @*<div class="layui-tab-item">
        <div id="pageDemo"></div>
    </div>*@
    <script>
        layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element'], function(){
            var laydate = layui.laydate //日期
            ,laypage = layui.laypage//分页
            layer = layui.layer //弹层
            ,table = layui.table //表格
            ,carousel = layui.carousel //轮播
            ,upload = layui.upload //上传
            ,element = layui.element; //元素操作
  
            //向世界问个好
            layer.msg('Hello World');
  
            //监听Tab切换
            element.on('tab(demo)', function(data){
                layer.msg('切换了：'+ this.innerHTML);
                console.log(data);
            });
 
            //定义一个数据表格显示实例
            table.render({
                elem: '#MyCustomerInfoShow'
              , height: 500
              , width: 1330
              , url: '/MyCustomer/Show' //数据接口
              , page: true //开启分页
              , loading:true
              , cols: [[ //表头
                  { type: 'checkbox', name: 'CheckBoxChecked', fixed: 'left' }
                , { field: 'Id', title: 'ID', align: 'center', width: 80, sort: true, fixed: 'left' }
                , { field: 'CustomerNumber', align: 'center', title: '用户编号', width: 100 }
                , { field: 'Organization', align: 'center', title: '组织', width: 100, sort: true }
                , { field: 'DepartmentNameId', align: 'center', title: '部门名称', width: 130 }
                , { field: 'CustomerPhoto', align: 'center', title: '顾客照片', width: 177 }
                , { field: 'CustomerName', align: 'center', title: '顾客名字', width: 100, sort: true }
                , { field: 'CreditGradeId', align: 'center', title: '信用等级', width: 100, sort: true }
                , { field: 'MemberCardNumber', align: 'center', title: '会员卡号', width: 100 }
                , { field: 'CustomerTypeId', align: 'center', title: '客户类型', width: 135, sort: true }
                , { field: 'Lable', align: 'center', title: '备注', width: 100 }
                , { field: 'StageId', align: 'center', title: '阶段', width: 100, sort: true }
                , { field: 'ValueAssessId', align: 'center', title: '价值评估', width: 130 }
                , { field: 'RelationGradeId', align: 'center', title: '关系等级', width: 177 }
                , { field: 'ProfessionId', align: 'center', title: '顾客名字', width: 100, sort: true }
                , { field: 'StaffScaleId', align: 'center', title: '员工规模', width: 100, sort: true }
                , { field: 'Sourse', align: 'center', title: '来源', width: 100 }
                , { field: 'Sex', align: 'center', title: '性别', width: 135, sort: true }
                , { field: 'BirthDay', align: 'center', title: '生日', width: 100 }
                , { field: 'Principal', align: 'center', title: '联系人', width: 100, sort: true }
                , { field: 'Telphone', align: 'center', title: '电话', width: 130 }
                , { field: 'QQNumber', align: 'center', title: 'QQ号', width: 177 }
                , { field: 'WeChatNumber', align: 'center', title: '微信号', width: 100, sort: true }
                , { field: 'EmailAddress', align: 'center', title: '邮箱地址', width: 100, sort: true }
                , { field: 'NextReturnVisitDate', align: 'center', title: '下次回访日期', width: 100 }
                , { field: 'Provice', align: 'center', title: '省', width: 135, sort: true }
                , { field: 'City', align: 'center', title: '市', width: 100 }
                , { field: 'Area', align: 'center', title: '县', width: 100, sort: true }
                , { field: 'Remark', align: 'center', title: '留言', width: 130 }
                , { field: 'Accessory', align: 'center', title: '附件', width: 177 }
                , { field: 'Creater', align: 'center', title: '创建人', width: 100, sort: true }
                , { field: 'UpdateOne', align: 'center', title: '修改人', width: 100, sort: true }
                , { field: 'LastFollowup', align: 'center', title: '最后跟进人', width: 100 }
                , { field: 'CreateDate', align: 'center', title: '创建时间', width: 135, sort: true }
                , { field: 'UpdateDate', align: 'center', title: '修改时间', width: 100 }
                , { fixed: 'right', title: '操作', width: 200, align: 'center', toolbar: '#OperationBar' }
              ]]

            });
            //分页           
            laypage.render({
                elem: 'pageDemo' //分页容器的id
                , layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']
              , count: 10 //总页数
              , skin: '#1E9FFF' //自定义选中色值
                ,skip: true //开启跳页
              , jump: function (obj, first) {
                  if (!first) {
                      layer.msg('第' + obj.curr + '页');
                  }
              }
            });
            //监听工具条
            //table.on('tool(demo)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            //    var data = obj.data //获得当前行数据
            //    , layEvent = obj.event; //获得 lay-event 对应的值
            //    if (layEvent === 'detail') {
            //        layer.msg('查看操作');
            //    } else if (layEvent === 'del') {
            //        layer.confirm('真的删除行么', function (index) {
            //            obj.del(); //删除对应行（tr）的DOM结构
            //            layer.close(index);
            //            //向服务端发送删除指令
            //            var ids = [];
            //            var ids = [];
            //            $("input[name='CheckBoxChecked']:checkbox:checked").each(function () {
            //                var Position = this.parent.parent.eq(1).value
            //                ids.push(Position);
            //                alert(ids)
            //            })
            //        });
            //    } else if (layEvent === 'edit') {
            //        layer.msg('编辑操作');
            //    }
            //});
            //批量删除


  //          laypage.render({
  //              elem: 'demo7'
  //, count: 100
  //, layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']
  //, jump: function (obj) {
  //    console.log(obj)
            //}


  //          });
            //var $ = layui.$, active = {
            //    reload: function () {
            //        var demoReload = $('#demoReload');

            //        table.reload('testReload', {
            //            where: {
            //                keyword: demoReload.val()
            //            }
            //        });
            //    }
            //};
        });
    </script>
    <script>
        function BatchDel() {
            alert('1')
            var ids = [];
            $("input[name='CheckBoxChecked']:checkbox:checked").each(function () {
                //var Position = $(this).parent().parent().child().eq(1).value
                ids.push($(this).parent().parent().children().eq(1).val())
                alert(ids)
            })
            layer.confirm("你确定删除么？",
                { btn: ['我确定', '不想'] },
                    function (obj) {
                        $.ajax({
                            url: "/Pschance/OfferDetails",
                            type: "post",
                            data: { ids: ids.toString() },
                            success: function (data) {
                                if (data == 1) {

                                    $("input[name='ck']:checkbox:checked").each(function () {
                                        $(this).parent().parent().remove();
                                    })
                                    layer.msg("删除成功！");
                                }
                                else
                                    layer.msg("未选中，删除失败！");
                            }
                        })
                    }

                )

        }
    </script>
</body>
</html>
